/*========================== GLOBAL ===========================*/ :root { /* ========================= ODLC GLOBAL COLORS ========================= */ --navy: #083C7C; --navy2: #083C7C; --blue: #083C7C; --cyan: #00a8ff; --purple: #6335e8; --yellow: #ffc400; --white: #ffffff; --muted: #899abd; --border: rgba(0, 168, 255, .30); --section-max-width: 1500px; /* Main Typography */ --font-main: "Inter", "Segoe UI", Arial, sans-serif; /* Main Colors */ --text-dark: #0b1f4d; --text-primary: #17203d; --text-body: #667085; --text-light: #ffffff; /* Font Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; } /* ========================================================= 2. GLOBAL BODY ========================================================= */ html, body { font-family: var(--font-main); color: var(--text-primary); font-size: 16px; line-height: 1.6; } /* ========================================================= 3. GLOBAL PARAGRAPHS ========================================================= */ p { font-size: 16px; line-height: 1.7; font-weight: 400; } /* ========================================================= 4. MAIN SECTION HEADINGS ========================================================= */ .section-title, .programmes-title { font-size: 52px; line-height: 1.12; font-weight: 800; letter-spacing: -1.2px; } /* ========================================================= 5. OTHER MAIN SECTION HEADINGS ========================================================= */ .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 46px; line-height: 1.15; font-weight: 800; letter-spacing: -1px; } /* ========================================================= 6. SPECIAL LARGE HERO HEADINGS ========================================================= */ .hero-section h1, .hero-section h2 { font-size: 54px; line-height: 1.1; font-weight: 800; } /* ========================================================= 7. SECTION DESCRIPTION ========================================================= */ .section-desc, .programmes-description, .testimonial-section > p, .blog-section > p, .section-description { font-size: 18px; line-height: 1.7; font-weight: 400; color: var(--text-body); } /* ========================================================= 8. SECTION BADGES ========================================================= */ .section-tag, .programmes-badge, .testimonial-badge, .blog-badge, .faq-badge, .hero-badge { font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: .5px; } /* ========================================================= 9. CARD HEADINGS ========================================================= */ .feature-card h4, .blog-card h4, .review-card h5, .info-content h5, .info-card h3, .impact-title { font-weight: 700; } /* ========================================================= 10. FEATURE CARD HEADING ========================================================= */ .feature-card h4 { font-size: 19px; line-height: 1.3; } /* ========================================================= 11. FEATURE CARD DESCRIPTION ========================================================= */ .feature-card p { font-size: 14px; line-height: 1.55; } /* ========================================================= 12. IMPACT CARD ========================================================= */ .impact-subtitle { font-size: 13px; font-weight: 700; letter-spacing: .7px; } .impact-title { font-size: 30px; line-height: 1.25; } .impact-item h3 { font-size: 28px; line-height: 1.1; font-weight: 800; } .impact-item p { font-size: 14px; line-height: 1.4; } /* ========================================================= 13. INFORMATION STRIP ========================================================= */ .info-content h5 { font-size: 18px; line-height: 1.3; font-weight: 700; } .info-content p { font-size: 13px; line-height: 1.5; } /* ========================================================= 14. PROGRAMME CARDS ========================================================= */ .program-card h3, .program-card h4, .programme-card h3, .programme-card h4 { font-size: 17px; line-height: 1.35; font-weight: 700; } .program-card p, .programme-card p { font-size: 13px; line-height: 1.55; } /* ========================================================= 15. PROGRAMME COUNTER ========================================================= */ .program-count-card h3 { font-size: 26px; line-height: 1.2; font-weight: 800; } .program-count-card p { font-size: 14px; line-height: 1.5; } /* ========================================================= 16. APPLICATION / GATEWAY SECTION ========================================================= */ .application-section h2, .gateway-section h2 { font-size: 46px; line-height: 1.15; font-weight: 800; } .application-section h4, .gateway-section h4 { font-size: 17px; line-height: 1.35; font-weight: 700; } .application-section p, .gateway-section p { font-size: 14px; line-height: 1.55; } /* ========================================================= 17. COMPARISON / WHY ODLC ========================================================= */ .comparison-section h2, .why-odlc-section h2 { font-size: 46px; line-height: 1.15; font-weight: 800; } .comparison-card h3, .stat-card h3 { font-size: 30px; line-height: 1.1; font-weight: 800; } .comparison-card p, .stat-card p { font-size: 13px; line-height: 1.4; font-weight: 500; } /* ========================================================= 18. CERTIFICATION CTA ========================================================= */ .certification-section h2, .skills-section h2 { font-size: 46px; line-height: 1.15; font-weight: 800; } .certification-section p, .skills-section p { font-size: 16px; line-height: 1.65; } /* ========================================================= 19. BOTTOM FEATURE STRIPS ========================================================= */ .feature-strip h4, .bottom-feature h4 { font-size: 16px; line-height: 1.3; font-weight: 700; } .feature-strip p, .bottom-feature p { font-size: 13px; line-height: 1.45; } /* ========================================================= 20. TESTIMONIALS ========================================================= */ .review-card h5 { font-size: 16px; line-height: 1.3; font-weight: 700; } .review-card small { font-size: 12px; } .review-card p { font-size: 14px; line-height: 1.65; } .review-card a { font-size: 13px; font-weight: 600; } /* ========================================================= 21. BLOG ========================================================= */ .blog-card h4 { font-size: 18px; line-height: 1.4; font-weight: 700; } .blog-card p { font-size: 14px; line-height: 1.6; } .blog-category { font-size: 12px; font-weight: 600; } .blog-footer a { font-size: 13px; font-weight: 600; } .date-box h4 { font-size: 18px; line-height: 1; } .date-box span { font-size: 11px; } /* ========================================================= 22. FAQ ========================================================= */ .faq-section h2 { font-size: 46px; line-height: 1.15; font-weight: 800; } .faq-question, .accordion-button { font-size: 16px; line-height: 1.4; font-weight: 600; } .faq-answer, .accordion-body { font-size: 14px; line-height: 1.65; } /* ========================================================= 23. BUTTONS ========================================================= */ button, .btn, a.btn, .blog-btn, .google-review-btn { font-size: 14px; line-height: 1.2; font-weight: 600; } /* ========================================================= 24. HEADER / NAVIGATION ========================================================= */ .navbar-nav .nav-link { font-size: 14px; font-weight: 600; } .navbar-brand { font-size: 18px; font-weight: 700; } /* ========================================================= 25. FOOTER ========================================================= */ footer h4, footer h5 { font-size: 16px; line-height: 1.3; font-weight: 700; } footer p, footer li, footer a { font-size: 13px; line-height: 1.6; } footer .footer-title { font-size: 17px; font-weight: 700; } /* ========================================================= 26. LAPTOP 992px - 1199px ========================================================= */ @media (max-width: 1199px) { .section-title, .programmes-title { font-size: 46px; } .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 42px; } .hero-section h1, .hero-section h2 { font-size: 48px; } .section-desc, .programmes-description { font-size: 17px; } .feature-card h4 { font-size: 18px; } .feature-card p { font-size: 13px; } .blog-card h4 { font-size: 17px; } } /* ========================================================= 27. TABLET 768px - 991px ========================================================= */ @media (max-width: 991px) { body { font-size: 15px; } p { font-size: 15px; line-height: 1.65; } /* Main headings */ .section-title, .programmes-title { font-size: 40px; line-height: 1.15; } .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 38px; } .hero-section h1, .hero-section h2 { font-size: 42px; } /* Description */ .section-desc, .programmes-description { font-size: 16px; line-height: 1.7; } /* Badge */ .section-tag, .programmes-badge, .testimonial-badge, .blog-badge, .faq-badge { font-size: 13px; } /* Cards */ .feature-card h4 { font-size: 17px; } .feature-card p { font-size: 13px; } .impact-title { font-size: 26px; } .impact-item h3 { font-size: 25px; } .impact-item p { font-size: 13px; } .blog-card h4 { font-size: 17px; } .blog-card p { font-size: 13px; } .review-card p { font-size: 13px; } /* FAQ */ .faq-question, .accordion-button { font-size: 15px; } .faq-answer, .accordion-body { font-size: 13px; } /* Buttons */ button, .btn, a.btn, .blog-btn, .google-review-btn { font-size: 13px; } } /* ========================================================= 28. MOBILE 576px - 767px ========================================================= */ @media (max-width: 767px) { body { font-size: 15px; } p { font-size: 14px; line-height: 1.65; } /* Main section headings */ .section-title, .programmes-title { font-size: 32px; line-height: 1.18; letter-spacing: -.5px; } .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 32px; line-height: 1.2; } .hero-section h1, .hero-section h2 { font-size: 34px; line-height: 1.15; } /* Description */ .section-desc, .programmes-description { font-size: 15px; line-height: 1.65; } /* Badges */ .section-tag, .programmes-badge, .testimonial-badge, .blog-badge, .faq-badge { font-size: 12px; } /* Feature cards */ .feature-card h4 { font-size: 16px; } .feature-card p { font-size: 12px; line-height: 1.5; } /* Impact */ .impact-title { font-size: 24px; } .impact-item h3 { font-size: 23px; } .impact-item p { font-size: 12px; } /* Programme cards */ .program-card h3, .program-card h4, .programme-card h3, .programme-card h4 { font-size: 16px; } .program-card p, .programme-card p { font-size: 12px; } /* Testimonials */ .review-card h5 { font-size: 15px; } .review-card small { font-size: 11px; } .review-card p { font-size: 13px; line-height: 1.6; } /* Blogs */ .blog-card h4 { font-size: 16px; } .blog-card p { font-size: 13px; } /* FAQ */ .faq-question, .accordion-button { font-size: 14px; } .faq-answer, .accordion-body { font-size: 13px; } /* Buttons */ button, .btn, a.btn, .blog-btn, .google-review-btn { font-size: 13px; } /* Footer */ footer h4, footer h5 { font-size: 15px; } footer p, footer li, footer a { font-size: 12px; } } /* ========================================================= 29. SMALL MOBILE BELOW 576px ========================================================= */ @media (max-width: 575px) { body { font-size: 14px; } p { font-size: 14px; line-height: 1.65; } /* Main headings */ .section-title, .programmes-title { font-size: 29px; line-height: 1.2; } .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 29px; line-height: 1.2; } .hero-section h1, .hero-section h2 { font-size: 30px; } /* Description */ .section-desc, .programmes-description { font-size: 14px; line-height: 1.65; } /* Badge */ .section-tag, .programmes-badge, .testimonial-badge, .blog-badge, .faq-badge { font-size: 11px; } /* Cards */ .feature-card h4 { font-size: 15px; } .feature-card p { font-size: 12px; } .impact-title { font-size: 22px; } .impact-item h3 { font-size: 21px; } .impact-item p { font-size: 11px; } .program-card h3, .program-card h4, .programme-card h3, .programme-card h4 { font-size: 15px; } .program-card p, .programme-card p { font-size: 12px; } /* Blog */ .blog-card h4 { font-size: 15px; } .blog-card p { font-size: 12px; } /* Testimonials */ .review-card h5 { font-size: 14px; } .review-card p { font-size: 12px; } /* FAQ */ .faq-question, .accordion-button { font-size: 13px; } .faq-answer, .accordion-body { font-size: 12px; } /* Buttons */ button, .btn, a.btn, .blog-btn, .google-review-btn { font-size: 12px; } /* Footer */ footer h4, footer h5 { font-size: 14px; } footer p, footer li, footer a { font-size: 11px; } } .section-container { width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; box-sizing: border-box; } /* ========================= DESKTOP ========================= */ .section-container { width: 100%; max-width: var(--section-max-width); margin: 0 auto; padding-left: 20px; padding-right: 20px; } /* ========================= LAPTOP ========================= */ @media (max-width: 1399px) { .section-container { max-width: 1300px; padding-left: 20px; padding-right: 20px; } } /* ========================= TABLET ========================= */ @media (max-width: 991px) { .section-container { max-width: 100%; padding-left: 15px; padding-right: 15px; } } /* ========================= MOBILE ========================= */ @media (max-width: 767px) { .section-container { padding-left: 10px; padding-right: 10px; } } /* ========================================================= DIPLOMA – 1 YEAR SKILL, VOCATIONAL & PROFESSIONAL PROGRAMMES ========================================================= */ /* ========================================================= GLOBAL ========================================================= */ .sv-banner, .eligibility-section, .courses-section { width: 100%; font-family: Arial, Helvetica, sans-serif; } .sv-banner *, .eligibility-section *, .courses-section * { box-sizing: border-box; } /* ========================================================= COMMON CONTAINER ========================================================= */ .sv-banner-container, .eligibility-section .container, .courses-container { width: 100%; max-width: 1740px; margin: 0 auto; padding-left: 42px; padding-right: 42px; } /* ========================================================= BANNER ========================================================= */ .skill-vocational-advanced { width: 100%; min-height: 455px; position: relative; overflow: hidden; background: #062d5c; font-family: Arial, Helvetica, sans-serif; } /* ========================================================= MAIN BANNER ========================================================= */ .skill-vocational-advanced-inner { width: 100%; min-height: 455px; position: relative; overflow: hidden; display: flex; align-items: center; } /* ========================================================= LEFT CONTENT ========================================================= */ .skill-vocational-advanced-content { width: 52%; position: relative; z-index: 5; /* padding: 65px 40px 65px 7%; */ color: #ffffff; } /* ========================================================= CATEGORY ========================================================= */ .certificate-category { color: #9fc2ff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 2px; margin-bottom: 12px; text-transform: uppercase; } /* ========================================================= BUTTON ========================================================= */ .certificate-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; min-height: 54px; padding: 0 28px; background: #ffffff; color: #083C7C; border: 2px solid #ffffff; border-radius: 7px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; transition: all 0.3s ease; } .certificate-btn i { font-size: 18px; transition: transform 0.3s ease; } .certificate-btn:hover { background: transparent; color: #ffffff; border-color: #ffffff; } .certificate-btn:hover i { transform: translateX(5px); } /* ========================================================= LABEL ========================================================= */ .skill-vocational-advanced-label { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; margin-bottom: 25px; border-radius: 30px; background: rgba(83, 119, 205, 0.35); border: 1px solid rgba(180, 204, 255, 0.35); color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; } .skill-vocational-advanced-label i { font-size: 13px; } .skill-vocational-advanced-content h5 { color: #a9c7ff; } /* ========================================================= HEADING ========================================================= */ .skill-vocational-advanced-content h3 { margin: 0; max-width: 600px; color: #ffffff; font-size: clamp(42px, 4.5vw, 68px); line-height: 1.08; font-weight: 600; letter-spacing: -1.5px; } .skill-vocational-advanced-content h3 span { color: #a9c7ff; } /* ========================================================= SMALL LINE ========================================================= */ .skill-vocational-advanced-line { width: 36px; height: 3px; margin: 24px 0 20px; background: #ffffff; border-radius: 10px; } /* ========================================================= DESCRIPTION ========================================================= */ .skill-vocational-advanced-content p { max-width: 480px; margin: 0; color: #e5edfb; font-size: 16px; line-height: 1.75; text-align: left; } /* ========================================================= RIGHT IMAGE AREA ========================================================= */ .skill-vocational-advanced-image { width: 58%; right: 0; clip-path: ellipse(70% 90% at 72% 50%); } .skill-vocational-advanced-image::before { left: -32%; width: 58%; } /* ========================================================= IMAGE ========================================================= */ .skill-vocational-advanced-image-circle { width: 100%; height: 100%; min-height: 620px; position: relative; overflow: hidden; border-left: none; background: #dce9fa; } .skill-vocational-advanced-image-circle img { width: 100%; height: 100%; min-height: 820px; display: block; object-fit: cover; object-position: center; transition: transform 0.7s ease; } /* ========================================================= DARK BLUE CURVE ========================================================= */ .skill-vocational-advanced-image::before { content: ""; position: absolute; top: -10%; left: -28%; width: 55%; height: 120%; z-index: 3; border-radius: 50%; background: #062d5c; } /* ========================================================= TOP DECORATIVE DOTS ========================================================= */ .skill-vocational-advanced-dots { position: absolute; top: 20px; left: 28px; width: 75px; height: 75px; z-index: 6; background-image: radial-gradient( circle, rgba(155, 190, 255, 0.75) 1.5px, transparent 1.5px ); background-size: 12px 12px; opacity: 0.55; } /* ========================================================= DECORATIVE RINGS ========================================================= */ .skill-vocational-advanced-ring { position: absolute; z-index: 4; border: 1px solid rgba(155, 190, 255, 0.28); border-radius: 50%; pointer-events: none; } .skill-vocational-advanced-ring-top { width: 125px; height: 125px; top: -45px; left: 47%; } .skill-vocational-advanced-ring-top::before, .skill-vocational-advanced-ring-top::after { content: ""; position: absolute; border: 1px solid rgba(155, 190, 255, 0.22); border-radius: 50%; } .skill-vocational-advanced-ring-top::before { inset: 15px; } .skill-vocational-advanced-ring-top::after { inset: 30px; } /* ========================================================= BOTTOM RING ========================================================= */ .skill-vocational-advanced-ring-bottom { width: 150px; height: 150px; bottom: -80px; left: -70px; border: 3px solid rgba(155, 190, 255, 0.75); } .skill-vocational-advanced-ring-bottom::before { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(155, 190, 255, 0.25); border-radius: 50%; } /* ========================================================= RESPONSIVE - LARGE TABLET ========================================================= */ @media (max-width: 1199px) { .skill-vocational-advanced, .skill-vocational-advanced-inner { min-height: 430px; } .skill-vocational-advanced-content { padding-left: 6%; } .skill-vocational-advanced-content h1 { font-size: 50px; } .skill-vocational-advanced-content p { max-width: 430px; font-size: 14px; } } /* ========================================================= SKILL & VOCATIONAL BANNER RESPONSIVE - TABLET + MOBILE ========================================================= */ /* ========================================================= TABLET 768px - 991px ========================================================= */ @media (min-width: 768px) and (max-width: 991px) { .skill-vocational-advanced { min-height: 430px; } .skill-vocational-advanced-inner { min-height: 430px; display: flex; align-items: center; } /* --------------------------------------------- CONTENT --------------------------------------------- */ .skill-vocational-advanced-content { width: 55%; padding: 45px 25px 45px 5%; z-index: 6; } .skill-vocational-advanced-label { padding: 8px 15px; margin-bottom: 18px; font-size: 11px; } .skill-vocational-advanced-content h1 { max-width: 500px; font-size: 40px !important; line-height: 1.15; letter-spacing: -0.8px; } .skill-vocational-advanced-line { margin: 18px 0 16px; } .skill-vocational-advanced-content p { max-width: 420px; font-size: 14px; line-height: 1.6; color: #ffffff; } /* --------------------------------------------- IMAGE --------------------------------------------- */ .skill-vocational-advanced-image { width: 58%; height: 100%; min-height: 430px; clip-path: ellipse(72% 90% at 75% 50%); } .skill-vocational-advanced-image-circle { min-height: 430px; } .skill-vocational-advanced-image-circle img { min-height: 430px; object-fit: cover; object-position: 62% center; } /* --------------------------------------------- BLUE CURVE --------------------------------------------- */ .skill-vocational-advanced-image::before { top: -5%; left: -30%; width: 48%; height: 110%; } /* --------------------------------------------- DECORATIONS --------------------------------------------- */ .skill-vocational-advanced-dots { width: 60px; height: 60px; top: 15px; left: 18px; background-size: 10px 10px; } .skill-vocational-advanced-ring-top { width: 100px; height: 100px; top: -30px; left: 48%; } } /* ========================================================= MOBILE 0px - 767px ========================================================= */ @media (max-width: 767px) { /* --------------------------------------------- MAIN BANNER --------------------------------------------- */ .skill-vocational-advanced { width: 100%; min-height: 560px; height: auto; position: relative; overflow: hidden; background: #062d5c; } /* --------------------------------------------- INNER --------------------------------------------- */ .skill-vocational-advanced-inner { width: 100%; min-height: 560px; height: auto; position: relative; display: block; overflow: hidden; } /* --------------------------------------------- IMAGE --------------------------------------------- */ .skill-vocational-advanced-image { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-height: 560px; z-index: 1; clip-path: none !important; } .skill-vocational-advanced-image-circle { width: 100%; height: 100%; min-height: 560px; border: 0; background: #dce9fa; overflow: hidden; } .skill-vocational-advanced-image-circle img { width: 100% !important; height: 100% !important; min-height: 560px; display: block; object-fit: cover !important; /* Move image slightly right so student's face remains visible. */ object-position: 62% center !important; } /* --------------------------------------------- DARK OVERLAY IMPORTANT FOR TEXT VISIBILITY --------------------------------------------- */ .skill-vocational-advanced-image::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient( 180deg, rgba(6, 45, 92, 0.15) 0%, rgba(6, 45, 92, 0.30) 28%, rgba(6, 45, 92, 0.65) 53%, rgba(6, 45, 92, 0.92) 100% ); pointer-events: none; } /* --------------------------------------------- REMOVE DESKTOP BLUE CURVE --------------------------------------------- */ .skill-vocational-advanced-image::before { display: none !important; } /* --------------------------------------------- CONTENT --------------------------------------------- */ .skill-vocational-advanced-content { position: relative; z-index: 5; width: 100% !important; min-height: 560px; height: auto; padding: 115px 22px 55px !important; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; box-sizing: border-box; } /* --------------------------------------------- LABEL --------------------------------------------- */ .skill-vocational-advanced-label { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; margin-bottom: 18px; border-radius: 25px; background: rgba(5, 50, 100, 0.70); border: 1px solid rgba(255,255,255,0.40); color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; backdrop-filter: blur(5px); } .skill-vocational-advanced-label i { font-size: 12px; } /* --------------------------------------------- HEADING --------------------------------------------- */ .skill-vocational-advanced-content h1 { width: 100%; max-width: 100%; margin: 0 !important; color: #ffffff !important; font-size: 31px !important; line-height: 1.16 !important; font-weight: 700 !important; letter-spacing: -0.5px; text-align: left; text-shadow: 0 2px 8px rgba(0,0,0,0.60); } .skill-vocational-advanced-content h1 span { color: #b8d4ff !important; } /* --------------------------------------------- LINE --------------------------------------------- */ .skill-vocational-advanced-line { width: 40px; height: 3px; margin: 17px 0 16px; background: #ffffff; border-radius: 10px; } /* --------------------------------------------- DESCRIPTION --------------------------------------------- */ .skill-vocational-advanced-content p { width: 100%; max-width: 100%; margin: 0; color: #ffffff !important; font-size: 14px !important; line-height: 1.65 !important; font-weight: 400; text-align: left !important; text-shadow: 0 2px 8px rgba(0,0,0,0.70); } /* --------------------------------------------- STRONG TEXT --------------------------------------------- */ .skill-vocational-advanced-content p strong, .skill-vocational-advanced-content p b { color: #ffffff !important; font-weight: 700 !important; } /* --------------------------------------------- DECORATIVE DOTS --------------------------------------------- */ .skill-vocational-advanced-dots { width: 55px; height: 55px; top: 15px; left: 15px; z-index: 6; background-size: 9px 9px; opacity: 0.35; } /* --------------------------------------------- TOP RING --------------------------------------------- */ .skill-vocational-advanced-ring-top { width: 85px; height: 85px; top: -25px; right: -10px; left: auto; z-index: 4; opacity: 0.5; } .skill-vocational-advanced-ring-top::before { inset: 12px; } .skill-vocational-advanced-ring-top::after { inset: 25px; } /* --------------------------------------------- BOTTOM RING --------------------------------------------- */ .skill-vocational-advanced-ring-bottom { width: 100px; height: 100px; bottom: -55px; left: -50px; opacity: 0.45; } } /* ========================================================= SMALL MOBILE 481px - 600px ========================================================= */ @media (min-width: 481px) and (max-width: 600px) { .skill-vocational-advanced { min-height: 540px; } .skill-vocational-advanced-inner { min-height: 540px; } .skill-vocational-advanced-image, .skill-vocational-advanced-image-circle { min-height: 540px; } .skill-vocational-advanced-image-circle img { min-height: 540px; object-position: 60% center !important; } .skill-vocational-advanced-content { min-height: 540px; padding: 105px 24px 45px !important; } .skill-vocational-advanced-content h1 { font-size: 30px !important; } } /* ========================================================= SMALL PHONE ========================================================= */ @media (max-width: 480px) { .skill-vocational-advanced { min-height: 520px; } .skill-vocational-advanced-inner { min-height: 520px; } .skill-vocational-advanced-image { min-height: 520px; } .skill-vocational-advanced-image-circle { min-height: 520px; } .skill-vocational-advanced-image-circle img { min-height: 520px; object-position: 59% center !important; } .skill-vocational-advanced-content { min-height: 520px; padding: 95px 19px 38px !important; } .skill-vocational-advanced-label { padding: 7px 12px; margin-bottom: 15px; font-size: 10px; } .skill-vocational-advanced-content h1 { font-size: 27px !important; line-height: 1.18 !important; letter-spacing: -0.3px; } .skill-vocational-advanced-line { width: 35px; height: 3px; margin: 14px 0 14px; } .skill-vocational-advanced-content p { font-size: 13px !important; line-height: 1.6 !important; } .skill-vocational-advanced-dots { width: 48px; height: 48px; top: 12px; left: 12px; background-size: 8px 8px; } .skill-vocational-advanced-ring-top { width: 75px; height: 75px; top: -20px; right: -15px; } .skill-vocational-advanced-ring-bottom { width: 85px; height: 85px; bottom: -45px; left: -40px; } } /* ========================================================= EXTRA SMALL PHONE ========================================================= */ @media (max-width: 360px) { .skill-vocational-advanced { min-height: 500px; } .skill-vocational-advanced-inner { min-height: 500px; } .skill-vocational-advanced-image, .skill-vocational-advanced-image-circle { min-height: 500px; } .skill-vocational-advanced-image-circle img { min-height: 500px; object-position: 57% center !important; } .skill-vocational-advanced-content { min-height: 500px; padding: 85px 16px 30px !important; } .skill-vocational-advanced-content h1 { font-size: 24px !important; line-height: 1.18 !important; } .skill-vocational-advanced-content p { font-size: 12px !important; line-height: 1.55 !important; } .skill-vocational-advanced-label { font-size: 9px; padding: 6px 10px; } } /* ========================================================= ELIGIBILITY SECTION ========================================================= */ .eligibility-section { padding: 60px 0; background: #ffffff; } /* ========================================================= COMMON ANIMATED HEADING ========================================================= */ .animated-section-heading { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 35px; } /* Icon */ .heading-icon { position: relative; width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: #ffffff; border: 1px solid #d6e3f5; border-radius: 50%; box-shadow: 0 8px 25px rgba(8, 60, 124, 0.10); z-index: 1; animation: headingFloat 3s ease-in-out infinite; } .heading-icon::before { content: ""; position: absolute; width: 58px; height: 58px; background: #edf4ff; border-radius: 50%; z-index: -1; } .heading-icon i { font-size: 30px; color: #0755b8; transition: transform 0.4s ease, color 0.4s ease; } /* Rotating ring */ .heading-icon::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid transparent; border-top-color: #3d83e8; border-right-color: #3d83e8; opacity: 0; } .animated-section-heading:hover .heading-icon::after { opacity: 1; animation: headingRotate 1.5s linear infinite; } .animated-section-heading:hover .heading-icon i { transform: translateY(-2px) scale(1.08); color: #003f91; } /* Heading text */ .animated-section-heading h2 { margin: 0; color: #083c7c; font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.3px; transition: color 0.3s ease, transform 0.3s ease; } .animated-section-heading:hover h2 { color: #064b9b; transform: translateY(-2px); } /* Yellow line */ .heading-accent { width: 42px; height: 4px; margin-top: 12px; background: #f4b400; border-radius: 10px; transform-origin: center; transition: width 0.4s ease, box-shadow 0.4s ease; } .animated-section-heading:hover .heading-accent { width: 65px; box-shadow: 0 3px 10px rgba(244, 180, 0, 0.25); } /* ========================================================= ELIGIBILITY GRID ========================================================= */ .eligibility-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; width: 100%; } /* ========================================================= ELIGIBILITY CARD ========================================================= */ .eligibility-card { position: relative; min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 24px 20px; background: #ffffff; border: 1px solid #dce7f5; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 25px rgba(8, 60, 124, 0.05); opacity: 0; transform: translateY(30px); animation: eligibilityReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .eligibility-card:nth-child(1) { animation-delay: 0.15s; } .eligibility-card:nth-child(2) { animation-delay: 0.25s; } .eligibility-card:nth-child(3) { animation-delay: 0.35s; } .eligibility-card:nth-child(4) { animation-delay: 0.45s; } .eligibility-card:hover { transform: translateY(-7px); border-color: #aac6e7; box-shadow: 0 18px 40px rgba(8, 60, 124, 0.12); } /* Eligibility icon */ .eligibility-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; border-radius: 50%; background: #edf4ff; color: #0755b8; font-size: 20px; transition: transform 0.35s ease, background 0.35s ease; } .eligibility-card:hover .eligibility-icon { transform: scale(1.08); background: #dceaff; } /* Content */ .eligibility-content h3 { margin: 0 0 8px; color: #162d4b; font-size: 24px; font-weight: 700; line-height: 1.4; } .eligibility-content p { margin: 0; color: #536982; font-size: 16px; line-height: 1.6; } /* Number */ .eligibility-number { position: absolute; right: 10px; bottom: 5px; color: #e4edf8; font-size: 30px; font-weight: 700; line-height: 1; } /* ========================================================= COURSES SECTION ========================================================= */ .courses-section { padding: 60px 0; background: #f5f8fd; } .courses-container { position: relative; } /* ========================================================= COURSES GRID ========================================================= */ .courses-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 24px; row-gap: 24px; width: 100%; } /* ========================================================= COURSE CATEGORY CARD ========================================================= */ .course-category-card { width: 100%; min-height: 250px; padding: 18px 18px 20px; background: #ffffff; border: 1px solid #d8e5f4; border-radius: 12px; box-sizing: border-box; opacity: 0; transform: translateY(30px); animation: courseCardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } /* Sequential animation */ .course-category-card:nth-child(1) { animation-delay: 0.20s; } .course-category-card:nth-child(2) { animation-delay: 0.30s; } .course-category-card:nth-child(3) { animation-delay: 0.40s; } .course-category-card:nth-child(4) { animation-delay: 0.50s; } .course-category-card:nth-child(5) { animation-delay: 0.60s; } .course-category-card:nth-child(6) { animation-delay: 0.70s; } .course-category-card:nth-child(7) { animation-delay: 0.80s; } .course-category-card:nth-child(8) { animation-delay: 0.90s; } .course-category-card:hover { transform: translateY(-7px); border-color: #9db9dc; box-shadow: 0 18px 40px rgba(8, 60, 124, 0.12); } /* ========================================================= COURSE CATEGORY HEADER ========================================================= */ .course-category-header { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; } /* Category icon */ .course-category-icon { position: relative; flex: 0 0 auto; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #0755b8; color: #ffffff; border-radius: 8px; font-size: 21px; overflow: hidden; transition: transform 0.35s ease, border-radius 0.35s ease, box-shadow 0.35s ease; } .course-category-card:hover .course-category-icon { transform: translateY(-3px) scale(1.06); border-radius: 10px; box-shadow: 0 8px 18px rgba(8, 60, 124, 0.20); } /* Icon shine */ .course-category-icon::after { content: ""; position: absolute; top: -60%; left: -100%; width: 60%; height: 220%; background: rgba(255, 255, 255, 0.20); transform: rotate(25deg); transition: left 0.6s ease; } .course-category-card:hover .course-category-icon::after { left: 150%; } /* Category title */ .course-category-header h3 { margin: 0; color: #083c7c; font-size: 24px; font-weight: 700; line-height: 1.35; } /* ========================================================= COURSE LIST ========================================================= */ .course-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 10px; } /* ========================================================= COURSE ITEM ========================================================= */ .course-item { min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 8px 11px; background: #ffffff; border: 1px solid #e1eaf5; border-radius: 7px; box-sizing: border-box; transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .course-item:hover { transform: translateX(5px); background: #f3f8ff; border-color: #b5cbe4; box-shadow: 0 4px 12px rgba(8, 60, 124, 0.08); } /* Number */ .course-item span { flex: 0 0 auto; min-width: 30px; color: #0755b8; font-size: 16px; font-weight: 700; } /* Course text */ .course-item p { margin: 0; color: #465d77; font-size: 16px; line-height: 1.45; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes headingFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes headingRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes eligibilityReveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes courseCardReveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .sv-banner-container { grid-template-columns: 46% 54%; } .sv-banner-content { padding: 45px 25px; } .sv-banner h1 { font-size: 42px; } .eligibility-grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================= MOBILE / TABLET ========================================================= */ @media (max-width: 991px) { .sv-banner { padding: 30px 0; } .sv-banner-container { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; min-height: auto; } .sv-banner-content { padding: 45px 32px; } .sv-banner-image { min-height: 340px; order: 2; margin: 0 18px 18px; border-radius: 25px; } .courses-grid { grid-template-columns: 1fr; } .course-category-card { min-height: auto; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 767px) { .sv-banner { padding: 20px 0; } .sv-banner-container { border-radius: 12px; } .sv-banner-content { padding: 35px 20px; } .sv-banner h1 { font-size: 34px; line-height: 1.15; } .sv-banner-content > p { font-size: 16px; line-height: 1.65; } .sv-banner-meta { flex-direction: column; align-items: flex-start; gap: 10px; } .sv-banner-image { min-height: 280px; } .eligibility-section, .courses-section { padding: 50px 0; } .eligibility-grid { grid-template-columns: 1fr; gap: 18px; } .animated-section-heading h2 { font-size: 28px; } .course-list { grid-template-columns: 1fr; gap: 9px; } .course-category-header h3 { font-size: 24px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .sv-banner-container { border-radius: 10px; } .sv-banner-content { padding: 30px 16px; } .sv-banner-top { font-size: 13px; padding: 7px 12px; } .sv-banner h1 { font-size: 30px; letter-spacing: -0.5px; } .sv-banner-line { margin: 16px 0; } .sv-banner-image { min-height: 240px; margin: 0 12px 12px; border-radius: 20px; } .eligibility-section, .courses-section { padding: 40px 0; } .animated-section-heading { margin-bottom: 28px; } .heading-icon { width: 70px; height: 70px; } .heading-icon::before { width: 52px; height: 52px; } .heading-icon i { font-size: 27px; } .animated-section-heading h2 { font-size: 26px; } .course-category-card { padding: 16px; } .course-category-header { gap: 13px; } .course-category-icon { width: 46px; height: 46px; font-size: 19px; } .course-category-header h3 { font-size: 24px; } .course-item { padding: 8px 10px; } .course-item p { font-size: 16px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .heading-icon, .eligibility-card, .course-category-card { animation: none !important; opacity: 1; transform: none; } .course-category-card, .course-category-icon, .course-item, .heading-icon i, .heading-accent { transition: none !important; } } /* ========================================================= ADVANCED DIPLOMA YEAR LABEL ========================================================= */ .programme-year { display: inline-flex; align-items: center; margin: 2px 0 12px; padding: 5px 12px; background: #083C7C; color: #ffffff; border-radius: 6px; font-size: 13px; font-weight: 600; line-height: 1.2; } /* Space between Year 1 and Year 2 */ .course-list + .programme-year { margin-top: 18px; } /* Keep course lists neat */ .programme-year + .course-list { margin-bottom: 4px; } /* ========================================================= SKILL & VOCATIONAL ADVANCED DIPLOMA TABLET + MOBILE RESPONSIVE ========================================================= */ /* ---------- TABLET : 768px - 991px ---------- */ @media (min-width: 768px) and (max-width: 991px) { .skill-vocational-advanced { width: 100% !important; min-height: auto !important; height: auto !important; background: #062d5c !important; overflow: hidden !important; } .skill-vocational-advanced-inner { width: 100% !important; min-height: auto !important; height: auto !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* IMAGE */ .skill-vocational-advanced-image { position: relative !important; inset: auto !important; width: 100% !important; height: 330px !important; min-height: 330px !important; order: 1 !important; clip-path: none !important; overflow: hidden !important; } .skill-vocational-advanced-image-circle { width: 100% !important; height: 330px !important; min-height: 330px !important; border: none !important; border-radius: 0 !important; overflow: hidden !important; } .skill-vocational-advanced-image-circle img { width: 100% !important; height: 330px !important; min-height: 330px !important; object-fit: cover !important; object-position: center 35% !important; display: block !important; } .skill-vocational-advanced-image::before, .skill-vocational-advanced-image::after { display: none !important; } /* CONTENT */ .skill-vocational-advanced-content { position: relative !important; width: 100% !important; min-height: auto !important; height: auto !important; order: 2 !important; padding: 42px 6% 48px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; background: #062d5c !important; box-sizing: border-box !important; } .skill-vocational-advanced-label { margin-bottom: 18px !important; font-size: 11px !important; padding: 8px 14px !important; white-space: normal !important; } .skill-vocational-advanced-content h5 { margin: 0 0 10px !important; font-size: 14px !important; line-height: 1.4 !important; color: #a9c7ff !important; } .skill-vocational-advanced-content h3, .skill-vocational-advanced-content h1 { width: 100% !important; max-width: 700px !important; margin: 0 !important; color: #fff !important; font-size: 42px !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: -.8px !important; text-align: left !important; } .skill-vocational-advanced-content h3 span, .skill-vocational-advanced-content h1 span { color: #a9c7ff !important; } .skill-vocational-advanced-line { width: 45px !important; height: 3px !important; margin: 18px 0 18px !important; background: #fff !important; } .skill-vocational-advanced-content p { width: 100% !important; max-width: 680px !important; margin: 0 0 18px !important; color: #e9f0fb !important; font-size: 15px !important; line-height: 1.7 !important; text-align: left !important; } .certificate-btn { width: auto !important; min-width: 240px !important; min-height: 50px !important; padding: 0 22px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; border-radius: 7px !important; font-size: 13px !important; } /* DECORATIONS */ .skill-vocational-advanced-dots { width: 60px !important; height: 60px !important; top: 15px !important; left: 15px !important; opacity: .3 !important; } .skill-vocational-advanced-ring-top { width: 90px !important; height: 90px !important; top: -30px !important; right: -25px !important; opacity: .35 !important; } .skill-vocational-advanced-ring-bottom { width: 100px !important; height: 100px !important; bottom: -55px !important; left: -50px !important; opacity: .3 !important; } } /* ---------- MOBILE : 767px and below ---------- */ @media (max-width: 767px) { .skill-vocational-advanced { width: 100% !important; min-height: auto !important; height: auto !important; background: #062d5c !important; overflow: hidden !important; } .skill-vocational-advanced-inner { width: 100% !important; min-height: auto !important; height: auto !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* IMAGE ON TOP */ .skill-vocational-advanced-image { position: relative !important; inset: auto !important; width: 100% !important; height: 235px !important; min-height: 235px !important; order: 1 !important; clip-path: none !important; overflow: hidden !important; } .skill-vocational-advanced-image-circle { width: 100% !important; height: 235px !important; min-height: 235px !important; border: none !important; border-radius: 0 !important; overflow: hidden !important; } .skill-vocational-advanced-image-circle img { width: 100% !important; height: 235px !important; min-height: 235px !important; object-fit: cover !important; object-position: center 35% !important; display: block !important; } .skill-vocational-advanced-image::before, .skill-vocational-advanced-image::after { display: none !important; } /* CONTENT BELOW IMAGE */ .skill-vocational-advanced-content { position: relative !important; width: 100% !important; min-height: auto !important; height: auto !important; order: 2 !important; padding: 30px 22px 38px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; background: #062d5c !important; box-sizing: border-box !important; } .skill-vocational-advanced-label { max-width: 100% !important; margin-bottom: 15px !important; padding: 7px 11px !important; font-size: 10px !important; line-height: 1.3 !important; white-space: normal !important; } .skill-vocational-advanced-content h5 { margin: 0 0 8px !important; font-size: 12px !important; line-height: 1.4 !important; letter-spacing: .6px !important; color: #a9c7ff !important; } .skill-vocational-advanced-content h3, .skill-vocational-advanced-content h1 { width: 100% !important; max-width: 100% !important; margin: 0 !important; color: #fff !important; font-size: 32px !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: -.5px !important; text-align: left !important; } .skill-vocational-advanced-content h3 span, .skill-vocational-advanced-content h1 span { color: #a9c7ff !important; } .skill-vocational-advanced-line { width: 38px !important; height: 3px !important; margin: 15px 0 !important; background: #fff !important; } .skill-vocational-advanced-content p { width: 100% !important; max-width: 100% !important; margin: 0 0 15px !important; color: #e9f0fb !important; font-size: 14px !important; line-height: 1.65 !important; text-align: left !important; } .certificate-btn { width: 100% !important; max-width: 100% !important; min-height: 48px !important; margin-top: 5px !important; padding: 0 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; box-sizing: border-box !important; border-radius: 7px !important; font-size: 12px !important; } .skill-vocational-advanced-dots { width: 45px !important; height: 45px !important; top: 10px !important; left: 10px !important; opacity: .25 !important; } .skill-vocational-advanced-ring-top { width: 70px !important; height: 70px !important; top: -25px !important; right: -20px !important; opacity: .3 !important; } .skill-vocational-advanced-ring-bottom { width: 80px !important; height: 80px !important; bottom: -45px !important; left: -40px !important; opacity: .25 !important; } } /* ---------- SMALL MOBILE : 480px and below ---------- */ @media (max-width: 480px) { .skill-vocational-advanced-image, .skill-vocational-advanced-image-circle, .skill-vocational-advanced-image-circle img { height: 205px !important; min-height: 205px !important; } .skill-vocational-advanced-content { padding: 26px 26px 32px !important; } .skill-vocational-advanced-content h3, .skill-vocational-advanced-content h1 { font-size: 29px !important; line-height: 1.1 !important; } .skill-vocational-advanced-content p { font-size: 13px !important; line-height: 1.6 !important; } .certificate-btn { min-height: 46px !important; font-size: 11px !important; } } /* ---------- VERY SMALL MOBILE : 360px and below ---------- */ @media (max-width: 360px) { .skill-vocational-advanced-image, .skill-vocational-advanced-image-circle, .skill-vocational-advanced-image-circle img { height: 185px !important; min-height: 185px !important; } .skill-vocational-advanced-content { padding: 23px 16px 30px !important; } .skill-vocational-advanced-content h3, .skill-vocational-advanced-content h1 { font-size: 26px !important; } .skill-vocational-advanced-content p { font-size: 12px !important; line-height: 1.6 !important; } } .programme-duration { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 20px; padding: 10px 18px; background: #ffffff; border: 2px solid #a9c7ff; border-radius: 30px; color: #083C7C; font-size: 18px; font-weight: 700; line-height: 1; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); } .programme-duration i { font-size: 17px; color: #083C7C; } @media (max-width: 767px) { .programme-duration { margin: 14px 0 18px; padding: 9px 15px; font-size: 15px; gap: 8px; } .programme-duration i { font-size: 15px; } } /* ============================================================================ THE TWO BODY SECTIONS PUT ON THE HEADER AND FOOTER WIDTHS ---------------------------------------------------------------------------- The header and the footer both run on the site width ladder - width 92%, max-width 1380px, margin-left and margin-right auto 94% 1199px and below 90% 767px and below 92% 480px and below - which is what puts their content 26.9px in from the left edge and 26.9px in from the right at a 912px viewport, and 1380px wide on a wide screen. The two sections below the banner were not on it. Measured at a 912px viewport before this block: header and footer content 26.9 .... 869.9 843.0 wide Eligibility Criteria 0.0 .... 896.8 896.8 wide 26.9 outside each side Course categories 0.0 .... 896.8 896.8 wide 26.9 outside each side Both were running the full width of the page, so each one sat outside the header and the footer rather than level with them. They now run on the same ladder, and both land on the header's left edge and the header's right edge at every width. THE BANNER IS NOT TOUCHED .skill-vocational-advanced-inner is left alone. It measures the full width of the page, and it should: it is the banner, and the banner is full-bleed so the photograph can run off both sides. On the Grade 10 page and on the ECCE pages the same measurement reads the same way and is not treated as an error. ONLY WIDTH AND THE TWO SIDE MARGINS ARE NAMED HERE .eligibility-section is scoped to its own direct child, because the class on that child is the plain class name "container", which is used all over the site and is not safe to name on its own. Nothing inside either section is affected and their vertical margins and their padding are untouched. Both sections already carry the same padding above and below - 60px and 60px on each. The two odlcf-* blocks below the footer strip, which carry 36px over 40px and 14px over 0px, are shared site components and are not named here. ============================================================================ */ .eligibility-section > .container, .courses-section > .courses-container { width: 92% !important; max-width: 1380px !important; margin-left: auto !important; margin-right: auto !important; } @media screen and (max-width: 1199px) { .eligibility-section > .container, .courses-section > .courses-container { width: 94% !important; } } @media screen and (max-width: 767px) { .eligibility-section > .container, .courses-section > .courses-container { width: 90% !important; } } @media screen and (max-width: 480px) { .eligibility-section > .container, .courses-section > .courses-container { width: 92% !important; } } /* ============================================================================ THE INSIDE OF THE TWO SECTIONS PUT ON THE HEADER AND FOOTER EDGES TOO ---------------------------------------------------------------------------- The block above put the two sections on the header and footer widths, and that measured 0.0 on each side. It was only the outside of the box. Measured at a 1000px viewport, after that block: header 29.6 .... 955.3 925.7 wide .eligibility-section > .container 29.6 .... 955.3 925.7 wide on the header edges .animated-section-heading 71.6 .... 913.3 841.7 wide 42.0 in each side .eligibility-grid 71.6 .... 913.3 841.7 wide 42.0 in each side .courses-section > .courses-container 29.6 .... 955.3 925.7 wide on the header edges .animated-section-heading 71.6 .... 913.3 841.7 wide 42.0 in each side .courses-grid 71.6 .... 913.3 841.7 wide 42.0 in each side The container itself was on the header edges. Everything inside it was 42px in from them, and all of it was the same 42px, because the container carries 42px of left and right padding. That padding is the whole of the gap - the margin on the container is 29.55px, which is what put the container itself on the header edge in the first place, and once the container is on the header edge the padding has nothing left to do. So the two grids were 84px narrower than the header and the footer, and the first card in each row and the last card in each row both sat 42px inside the edges they were supposed to be level with. WHAT IS DONE .eligibility-section > .container, .courses-section > .courses-container padding-left 0 padding-right 0 Only the two horizontal values. The vertical padding on both is left exactly as it was - the 42px named above is left and right, and the vertical padding is a separate pair of values that is not touched. What this does: .animated-section-heading 29.6 .... 955.3 925.7 on the header edges .eligibility-grid 29.6 .... 955.3 925.7 on the header edges .courses-grid 29.6 .... 955.3 925.7 on the header edges first card in each row 29.6 last card in each row right edge 955.3 The grids are grids, so the cards share out the extra 84px between them - each card is 42px wider and the gap between the two columns is unchanged. Nothing is clipped, nothing overflows, and no card loses or gains a line of text, because nothing about their width is fixed. THE CARD PADDING IS NOT TOUCHED Each card carries its own 20px (eligibility) or 18px (courses) of padding, and that is the space between the card's edge and the words inside it. It is not a gutter to the page and it is left alone. ============================================================================ */ .eligibility-section > .container, .courses-section > .courses-container { padding-left: 0 !important; padding-right: 0 !important; } /* ============================================================================ SKILL & VOCATIONAL - ADVANCED DIPLOMA PROGRAMMES: THE SAME TREATMENT AS THE CERTIFICATE AND DIPLOMA PAGES ---------------------------------------------------------------------------- This page is the same template as the other two in this folder under the skill-vocational-advanced prefix, and it arrived in the same state. Every number here was measured on this page and is the same one, and the same source: the Grade 10 banner, and the site ladder the header and the footer run on. This page does not load global-typography.css, so nothing is inherited - every value is written out. The two widths blocks above are not repeated here. They put the two sections on the header and footer widths and took the 42px off the inside of the container, and both are correct on this page already. NOTHING IN THE MARKUP WAS TOUCHED. ADVANCED DIPLOMA PROGRAMMES, both paragraphs, the duration pill, the button, the four eligibility cards, the three decorations and the photograph are all still in advanceddiplomaprogrammes-2year.php exactly as they were. THE BACKGROUND IS NOT TOUCHED This page's banner navy is #062D5C and it stays #062D5C. That is this page's own colour. The Grade 10 navy is not carried across as a background on this page or on any page that comes next, and the lettering inside the duration pill and the button is left as it is - #083C7C on white on the certificate and diploma pages, white on this one, which is this page's own choice. --------------------------------------------------------------------------- 1. THE BANNER TYPE Measured at a 912px viewport before this block: the pill ".skill-vocational-advanced-label" 11px, 8px 14px padding, 18px below, rgba(83,119,205,.35) fill, 1px rgba(180,204,255,.35) border, 30px radius "SKILL & VOCATIONAL PROGRAMMES" 16px/25.6 ls 2px uppercase the title h3, and its span 42px/46.2 w700 ls -0.8px mixed case, span #A9C7FF the rule 45 x 3px r10 18px either side "Duration: 2 Years" 18px/18 w700, no tracking both paragraphs 15px/25.5 no tracking, solid #E9F0FB All of it now on the Grade 10 scale: the pill's fill, border, radius, padding, gap, tracking and type; the title at 40px/1.08 weight 800, -1px, uppercased, span #A9C7FF; the rule at 36 x 3px r10 margin 24px 0 20px; both paragraphs at the description role; the duration pill and the button at the pill's type. The ladder is the one already set out on the other two pages. --------------------------------------------------------------------------- 2. THE BANNER GUTTER The banner text sat 53.8px in from the left of the page while the header logo sat on 26.9px. The gutter goes on the content column as a margin rather than as padding on the section, because here the photograph is a normal flex item of the same column and not anchored to the right edge the way Grade 10's is - padding on the section would have pushed the photograph in from the left and left a navy strip down its side. A margin on the content column moves only the text, and the photograph still bleeds the full width. --------------------------------------------------------------------------- 3. THE FOUR ELIGIBILITY CARDS PUT ON ONE LEFT EDGE The same fault as the other two pages, and the same cause: the card is a flex column with align-items:center and text-align:center, and the content column inside it was not stretched, so each child took only as wide as its own longest line. Note that on this page .eligibility-content is display:block, not a flex column as on the other two, so naming it display:flex with flex-direction column here is what gives the same result rather than restating what was already so. The heading here was 24px on a 33.6px line - fixed, but 50% larger than the 16px of copy directly under it, and large enough that all four of these headings wrapped as well. It is now 17px at weight 700 on a 1.35 line, which is the card-title size the rest of the site uses. There is no inside the heading on this page, so none is named. The heading colour is left as it was. The 01 to 04 in the corner is absolutely positioned and is not touched. --------------------------------------------------------------------------- 4. THE THREE DECORATIONS The dotted grid and the two rings are turned off, as on the other two pages and on the ECCE banners. Hidden, not deleted - remove the one rule below and they come straight back. --------------------------------------------------------------------------- NOT TOUCHED The photograph keeps this page's own shape: the banner is stacked here, the text above and a full-width 330px band of picture below it, cut at object-position 50% 35%. That is a change of layout, not of font or width, so it is not made. The odlcf-* blocks below the footer strip are shared site components. odlcf-cta carries 36px over 40px and odlcf-strip carries 14px over 0px; both are out by the equal-padding rule and both are left alone, because changing them here changes them on every page in the site. There is no table on this page, so there is no table to bring to 16px. ============================================================================ */ .skill-vocational-advanced { font-family: Arial, Helvetica, sans-serif !important; box-sizing: border-box !important; } .skill-vocational-advanced-content { padding-left: 0 !important; margin-left: max(4%, 50% - 690px) !important; } /* ---------------------------------------------------------------- the pill */ .skill-vocational-advanced-label { width: fit-content !important; display: flex !important; align-items: center !important; gap: 10px !important; padding: 11px 20px !important; margin-bottom: 25px !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; border-radius: 30px !important; background: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.3px !important; backdrop-filter: blur(5px) !important; } .skill-vocational-advanced-label i { font-size: 16px !important; line-height: 1.3 !important; letter-spacing: 0.3px !important; } /* ------------------------------------------- the category and the title */ .certificate-category { font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: #a9c7ff !important; } .skill-vocational-advanced-content h3 { font-family: Roboto, Arial, sans-serif !important; font-size: 40px !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -1px !important; text-transform: uppercase !important; color: #ffffff !important; text-align: left !important; margin: 0 !important; } .skill-vocational-advanced-content h3 span { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; color: #a9c7ff !important; } /* ---------------------------------------------------------------- the rule */ .skill-vocational-advanced-line { width: 36px !important; height: 3px !important; margin: 24px 0 20px !important; background: #ffffff !important; border-radius: 10px !important; } /* --------------------------------- the two paragraphs, the pill, the button */ .skill-vocational-advanced-content > p { font-family: Arial, Helvetica, sans-serif !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1.75 !important; letter-spacing: 0.2px !important; color: rgba(255, 255, 255, 0.9) !important; text-align: justify !important; margin-top: 0 !important; } .programme-duration, .certificate-btn { font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.3px !important; } .programme-duration i, .certificate-btn i { font-size: 15px !important; letter-spacing: 0.3px !important; } /* ------------------------------------------------------- the eligibility cards */ .eligibility-section .eligibility-card { align-items: flex-start !important; text-align: left !important; } .eligibility-section .eligibility-content { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } .eligibility-section .eligibility-content h3, .eligibility-section .eligibility-content p { width: 100% !important; text-align: left !important; } .eligibility-section .eligibility-content h3 { font-family: Arial, Helvetica, sans-serif !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: 0 !important; } /* -------------------------------------------------------- the decorations */ .skill-vocational-advanced-dots, .skill-vocational-advanced-ring { display: none !important; } /* ============================================================================ THE SAME LADDER THE OTHER TWO PAGES IN THIS FOLDER USE ============================================================================ */ @media screen and (max-width: 1399px) { .skill-vocational-advanced-content > p { font-size: 16px !important; line-height: 1.75 !important; } } @media screen and (max-width: 1199px) { .skill-vocational-advanced-content { margin-left: max(3%, 50% - 690px) !important; } .skill-vocational-advanced-label { gap: 9px !important; padding: 10px 18px !important; margin-bottom: 22px !important; font-size: 15px !important; } .skill-vocational-advanced-label i { font-size: 15px !important; } .skill-vocational-advanced-content h3 { font-size: 40px !important; line-height: 1.08 !important; letter-spacing: -1px !important; } .eligibility-section > .container, .courses-section > .courses-container { width: 94% !important; } } @media screen and (max-width: 991px) { .skill-vocational-advanced-label { gap: 8px !important; padding: 9px 17px !important; margin-bottom: 20px !important; font-size: 14px !important; line-height: 1.35 !important; } .skill-vocational-advanced-label i { font-size: 14px !important; } .skill-vocational-advanced-content h3 { font-size: 36px !important; line-height: 1.1 !important; letter-spacing: -0.8px !important; } .skill-vocational-advanced-line { margin: 18px 0 15px !important; } .skill-vocational-advanced-content > p { font-size: 16px !important; line-height: 1.65 !important; } } @media screen and (max-width: 767px) { .skill-vocational-advanced-content { margin-left: max(5%, 50% - 690px) !important; } .skill-vocational-advanced-label { gap: 8px !important; padding: 8px 15px !important; margin-bottom: 18px !important; font-size: 13px !important; line-height: 1.35 !important; } .skill-vocational-advanced-label i { font-size: 13px !important; } .skill-vocational-advanced-content h3 { font-size: 34px !important; line-height: 1.08 !important; letter-spacing: -0.8px !important; } .skill-vocational-advanced-content > p { font-size: 15px !important; line-height: 1.6 !important; } } @media screen and (max-width: 575px) { .skill-vocational-advanced-label { gap: 7px !important; padding: 7px 13px !important; margin-bottom: 16px !important; font-size: 12px !important; line-height: 1.4 !important; } .skill-vocational-advanced-label i { font-size: 12px !important; } .skill-vocational-advanced-content h3 { font-size: 30px !important; line-height: 1.1 !important; letter-spacing: -0.6px !important; } .skill-vocational-advanced-content > p { font-size: 14px !important; line-height: 1.6 !important; } } @media screen and (max-width: 480px) { .skill-vocational-advanced-content { margin-left: max(4%, 50% - 690px) !important; } .skill-vocational-advanced-label { gap: 6px !important; padding: 6px 12px !important; margin-bottom: 14px !important; font-size: 11px !important; line-height: 1.4 !important; } .skill-vocational-advanced-label i { font-size: 11px !important; } .skill-vocational-advanced-content h3 { font-size: 29px !important; } .skill-vocational-advanced-line { width: 30px !important; height: 3px !important; margin: 16px 0 !important; } } @media screen and (max-width: 400px) { .skill-vocational-advanced-content h3 { font-size: 29px !important; line-height: 1.1 !important; letter-spacing: -0.4px !important; } } /* ============================================================================ ADVANCED: THE BANNER TEXT GETS ITS LEFT PADDING BACK ON A PHONE --------------------------------------------------------------------------- ONE DECLARATION. padding-left, on one selector, below 768px. No font, no colour, no background, no border, no radius, no shadow, no width, no height, no margin, no gap, no position. The banner's top and bottom padding, its right padding and its type are not touched. No markup is touched. -------------------------------------------------------------------------- THE FAULT, MEASURED LIVE AT 390px, 360px AND 320px section padding T 0px R 0px B 0px L 0px inner padding T 0px R 0px B 0px L 0px content padding T 26px R 18px B 32px L 0px Every piece of banner text starts at the same place: .skill-vocational-advanced-label L 7.80 "Home / Skill & V..." <- the breadcrumb .certificate-category L 7.80 "SKILL & VOCATIONAL PROGRAMMES" .certificate-btn L 7.80 "EXPLORE CERTIFICATE PROGRAMMES" 7.80px from the edge of the screen. Thirteen separate elements sit within 12px of it. The right padding is 18px at this width, so the banner is not even symmetric - it has an 18px margin on the right and none on the left. The header logo on the same page, measured on the same load: vw logo left edge 390 15.59px = 4.00% of the viewport 360 14.41px = 4.00% of the viewport 320 12.80px = 4.00% of the viewport So the banner text sat 7.79px LEFT of the logo directly above it, and hard against the screen edge. That is the gap in the screenshot. -------------------------------------------------------------------------- WHY IT IS ZERO, WHICH IS NOT A MISSING VALUE BUT A PRESENT ONE The gutter was never missing. It is set three times in this file: line 1434 .skill-vocational-advanced-content { padding: 65px 40px 65px 7%; } line 1805 @media (max-width: 1199px) padding-left: 6%% line 1851 @media (768px - 991px) padding: 45px 25px 45px 5%% and then taken away again by one rule further down, with no media query around it at all: padding-left: 0 !important; Being later in the file and carrying !important, it beats all three. The same values are written out in the three tiers below 768px - 22px at line 3939, 18px at 4057, 16px at 4089 - and this rule overrides every one of them as well, because 0 with !important outranks any number without. -------------------------------------------------------------------------- THE ONE DECLARATION @media screen and (max-width: 767px) .skill-vocational-advanced-content { padding-left: max(4%, 50% - 690px) !important; } max(4%%, 50%% - 690px) is the gutter expression the rest of the site already uses to put banner text on the header logo's left edge. Below 768px the second term is strongly negative - at 767px it is -306.5 - so it resolves to 4%%, which is exactly where the logo sits at every phone width measured. before after header logo 390 7.80 15.59 15.59 on it 360 7.20 14.41 14.41 on it 320 6.41 12.80 12.80 on it It is the same expression written for .ecce-levelN-content earlier in this work, so these three banners, the ECCE banners and the header all land on one edge at every phone width. -------------------------------------------------------------------------- NOTHING ELSE MOVES The right padding stays 22px below 481px and 18px below 768px; the top stays 26px and the bottom 32px at 480px. The banner's height, its type, its gradient, the breadcrumb chip, the category label, the h3, the rule, the duration chip, the two paragraphs and the button are all untouched, as are the rings, the dots and the photograph. box-sizing is already border-box on this element at line 3939, so the padding comes out of the width and the banner does not grow: measured width stays 390.00px at a 390px viewport and the page does not overflow. -------------------------------------------------------------------------- ABOVE 768px NOTHING CHANGES The declaration is inside max-width:767px, so the tablet and desktop banners are exactly as they are now. Worth knowing, not changed here: that unguarded padding-left: 0 also overrides the 7%% / 6%% / 5%% gutter above 768px, so the desktop banner text also starts hard against the edge. That is outside a mobile view and is left alone - say the word and it is the same one declaration in a wider query. ============================================================================ */ /* ---- the banner text gets its left padding back on a phone ---- */ /* An unguarded padding-left:0 !important further down this file overrides the 7%% / 6%% / 5%% gutter AND every mobile tier, so all the banner text starts 7.80px from the screen edge at 390px - 7.79px left of the header logo directly above it, which sits at 4.00%% of the viewport. Restored below 768px with the same expression the ECCE banners use, so the text lands on the logo at 390, 360 and 320. box-sizing is already border-box, so the banner does not widen. Top, bottom and right padding untouched. */ @media screen and (max-width: 767px) { .skill-vocational-advanced-content { padding-left: max(4%, 50% - 690px) !important; } }